habiticafandomcom-20200222-history
Guidance for Blacksmiths
Git Here is a small tutorial to explain how to fork habitrpg, create new feature branches, and perform pull requests: 1. Fork & Clone HabitRPG The easiest way is to go on the habitrpg github page and click the Fork button. Then do a git clone of your own repository. Another way is to git clone https://github.com/HabitRPG/habitrpg.git directly, then git remote set-url origin https://github.com/YourUsername/habitrpg.git. Finally, git push to update your fork. 2. Setup Upstream Branch Next step is to keep track of the upstream habitrpg repository, so we can easily update our fork with the latest changes. Because origin is the url to our fork, we will create another remote upstream for habitrpg: $ git remote add upstream https://github.com/HabitRPG/habitrpg.git Then, everytime you want to get habitrpg's latest code, you can do: $ git fetch upstream 3. Rebase Branch When you want to update your local branch, you need to rebase it from the upstream branch. Let update develop: $ git checkout develop $ git rebase upstream/develop $ git push # to update your fork Note: If you want to work on a feature that was started by someone else, and not yet merged in upstream, you can use the same technique as shown in 2. & 3. to pull their commits: Let's say the user 'Fandekasp' wrote a feature branch 'add_theme' which is awaiting a pull request into upstream/audio. You also have your fork of upstream/audio, and would like to get Fandekasp's changes right now. $ git remote add fandekasp https://github.com/Fandekasp/habitrpg.git $ git fetch fandekasp $ git rebase fandekasp/add_themes 4. Create a New Feature Now, you want to start a new task, and pull request it. First, you need to find which branch to start the feature from. Do a git branch -r to see the list of remote branches. Choose the appropriate branch depending on the task you want to work on. Let's say you decide to start your task from the develop branch. To create your feature, do: $ git checkout -b relevant_branch_name upstream/develop Then you can git push it in your fork. 5. Write Commits When developing code, I recommend to do regular small commits, which are easier to review than a big one. It's also easier for developers to refuse or edit one specific commit that need changes. For example, you could have a commit dedicated to tests, followed by one with ui changes, one to write the logic, and one for the translations. If your changes are done in several days, go back to 3. rebase branch to update your branch. If some conflict appear, you'll often want to simply use the upstream version: $ git rebase -Xours upstream/develop 6. Pull Request When you're done with your code, or half-done but wish to do the pull request anyways (to get some feedback for example), push your branch code in your fork. You can then go to https://github.com/YourUsername/habitrpg.git, and you will see a Pull request button awaiting. When doing the pull request, verify that the merge will be done in the correct branch. It often default to upstream/develop even if you created your branch from another one. Another way is to use the tool hub (install it with your package manager), then run hub pull-request from your branch. 7. Issues You tried to do a rebase, and oh no ! it got all messy and you got tons of new and unrelevant commits in your branch. No worries, there are several solutions to get out of that mess: Cherry-pick One solution is to keep a git log window open, with all your commits hash availables. You can now perform git reset --hard HEAD~1 (if there is only one commit to remove, otherwise HEAD~nb_of_commits). If you delete too many commits, just git pull again from your fork. Then, copy the commit hash of the commits you want to readd on top of your branch (from the git log window you let open before doing a reset). eg: $ git cherry-pick ee1768b7e2c0bcee9eff1a45be1e3543fac0687b This will readd commit ee1768b7e2c0bcee9eff1a45be1e3543fac0687b on top of HEAD. Stash if you tried to push and push failed because remote has a different HEAD than your local repo (this happens to people working together on the same branch and pushing on the same remote), don't pull ! Instead, do $ git reset --soft HEAD~n_local_commits_ahead $ git stash $ git pull $ git stash pop $ git commit -am "message" Work with habitrpg-shared Ok, you started working on a task, and you realized you needed to modify some code that is present in node_modules/habitrpg-shared. You could do your modifications in the habitrpg repo to test then with grunt, then do those modifications again in the habitrpg-shared repo to commit and pull-request them, but that would be quite inefficient. Here is a better way to do. Let's assume you already forked habitrpg-shared in your github account, and didn't clone it yet: $ cd habitrpg/ $ rm -rf node_modules/habitrpg-shared $ cd node_modules && git clone https://github.com/USERNAME/habitrpg-shared && cd .. $ cd public/bower_components/ && rm -rf habitrpg-shared && ln -s ../node_modules/habitrpg-shared . Note : Somehow, I couldn't get grunt working if I used a symlink in the node_modules directory Now, when you need to commit and pull request, I suggest that you keep the same branch names in both repositories. Also, you can pull request the habitrpg branch first, then copy the pull request url and paste it in the pull request from habitrpg-shared for cross-reference. MongoDB Quick tips for new developers to get a hang on using the database. Access a shell First option is to start the mongo shell, then select the database: $ mongo > show dbs > use habitrpg Second option is to directly start the shell with the correct db: $ mongo habitrpg > show collections Use the shell Within the shell, the first thing you probably want to do is find your test user and examine his data. From localhost settings, copy the user id, then run the following command: > db.users.find({_id: '85b007a2-b5b9-4bb4-8b82-e4567edb4919'})0 Wanna see the preferences only ? > db.users.find({_id: '85b007a2-b5b9-4bb4-8b82-e4567edb4919'})0.preferences If you want to update something for your user, use the update method. Here an example to edit your profile blurb: > db.users.update({_id: '1703b7fa-ba95-4d67-a006-7005ff67c1cb'}, {$set: {"profile.blurb":'test'}}) Migrations When you will work on migration scripts, you need to add your new script in migrations/. There are already plenty of scripts, so you can read them and use them as example to write your own script Then you can test it as follow: $ mongo habitrpg migrations/date_title.js Get admin rights Find your user id, then run in the mongo shell: > db.users.update({_id: '85b007a2-b5b9-4bb4-8b82-e4567edb4919'}, {$set: {contributor: {"admin":1}}}) Reload your page, and you'll see an admin tab: Angular/Node/Jade Tips & Best Practices Data Binding, and Template Conditionals: When working in the Jade templates, you may see element attributes such as ng-class, ng-show, or ng-if. These are bindings that are used to map model data to elements for display that are part of AngularJS. These bindings can be used to define styles or display based on conditionals. You may also notice some other attributes such as bo-class or bo-if.... so what's the difference?? Bindings that begin with "ng" are part of Angular and are completely dynamic. This means that everytime something changes with the app, Angular will test all of these bindings with conditionals again and take action again. Obviously this is a concern for performance. Sometimes the data used to calculate these conditionals will not change often, if ever. When that is the case, we have an option for static binding, using a library called Bindonce. These are similar bindings, but they only are checked at the initial load of the application. If possible, this should be the preferred method of binding as long as the data will not change. Bindonce directives should only be used if the following rule is true: the model data being used for the conditional will not change during a session, or will change infrequently enough that it's not unreasonable to expect the user to refresh the page. If not, stick with traditional binding. If you can't decide or have no idea what you just read, just use the ng- attributes. Other Various useful commands. Search code In the console, type: $ grep -R "STRING" * To search for STRING in all files of the repository if you want to make a search case insensitive (STRING or String or string etc), add '-i' $ grep -iR "STRING" * You'll often want to search all files containing some keyword, in order to determine what files need to be edited when adding/editing some feature. Search and replace Here is a perl command to run in the terminal: $ perl -e "s/FROM/TO/g" -pi $(find . -name "*.js") Replace FROM by the string you want to replace, and TO by the string to replace the first one with. Note that this example will replace that string only in javascript files (extension .js), but you can specify other filetypes if you want. If you want to replace all strings, but not their plural or other words containing that string (eg replace weapon by TEST, but do not replace weapons, do: $ perl -e 's/weapon\b/TEST/g' -pi * If you want to remove all lines in the js files that contain some keyword, do: $ perl -ni -e 'print unless /keyword/' -pi $(find . -name "*.js") These commands are particularly useful with translations related work. =Tips for Pixel artists= Pixel Art Below are some rules & tips to help artists quickly produce materials. Note that all patterns should be at 3x pixel zoom. Canvas sizes soft limit for each category: * Pets: 81x99 * Mounts: 105x123 * Icons: 42x42 * Bosses: 216x177 If anyone needs help with a starting point, Shaners made these two templates that can serve as the bottom layer when working then hidden before export: Work at this size and then export at 3x without any anti-aliasing or interpolation. Gimp Gimp related tips. Gradients Use an existing image In this video are shown the following tips: * Search a reusable image on google. * Scale an image * Add alpha layer to remove the background color * Change colors with posterize and contrast * Pixelize an image * set half-transparent pixel to black * draw a border around the image. Colors See also * Pandoro spec tutorial Category:Setup Tips Category:Advanced Category:Contributing Category:Help Category:Content Category:Pets Category:Help:Technical